<template>
  <view class="register">
    <!--顶部返回按钮-->
    <!-- <view class="back-btn img" >
      <image :src="nav_back" @tap="navBack"></image>
    </view> -->
    <view class="right-top-sign"></view>
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">
      <view class="left-top-sign" >
        邀请注册
      </view>
      <view class="input-content">
        <view class="input-item input-item-sms-code">
          <text class="tit">手机号码</text>
          <view class="flex">
            <input
              type="number"
              v-model="registerParams.phone"
              placeholder="请输入手机号码"
              maxlength="11"
            />
            <button
              class="sms-code-btn"
              :disabled="smsCodeBtnDisabled"
              @tap.stop="getSmsCode"
            >
              <text v-if="!smsCodeBtnDisabled">|&nbsp;&nbsp;获取验证码</text>
              <text v-else class="sms-code-resend">{{
                `重新发送 (${codeSeconds})`
              }}</text>
            </button>
          </view>
        </view>
        <view class="input-item">
          <view class="input-wrapper">
            <view class="rf-input-wrapper">
              <view class="tit">验证码</view>
              <input
                type="number"
                v-model="registerParams.code"
                placeholder="请输入验证码"
                maxlength="4"
                data-key="mobile"
              />
            </view>
          </view>
        </view>
        <view class="input-item">
          <text class="tit">密码</text>
          <input
            type="password"
            v-model="registerParams.password"
            placeholder="请输入密码"
          />
        </view>
        <view class="input-item">
          <text class="tit">再次输入密码</text>
          <input
            type="password"
            v-model="registerParams.password_repetition"
            placeholder="再次输入密码"
          />
        </view>
        <view class="input-item" >
          <text class="tit">邀请码</text>
          <input type="text" v-model="registerParams.invite_code" />
        </view>
      </view>
      <view class="footer-protocol">
        <text
          @tap="isAppAgreementDefaultSelect"
          class="cuIcon"
          :class="
            appAgreementDefaultSelect
              ? `text-${themeColor.name} cuIcon-radiobox`
              : 'cuIcon-round'
          "
        ></text>
        <text class="content">同意</text>
        <!-- 协议地址 -->
        <navigator
          :class="'text-' + themeColor.name"
          url="/pages/set/about/detail?field=protocol_register&title=注册协议"
          open-type="navigate"
          >《用户授权协议》</navigator
        >
      </view>
      <button
        class="confirm-btn"
        :disabled="btnLoading"
        :loading="btnLoading"
        @tap="toRegister"
      >
        注册
      </button>
    </view>
    <!-- 底部协议 -->
  </view>
</template>
<script>
import { mapMutations } from "vuex";
import { registerByPass, smsCode } from "@/api/login";
import moment from "@/common/moment";
export default {
  data() {
    return {
      appAgreementDefaultSelect: this.$mSettingConfig.appAgreementDefaultSelect, // 是否允许点击登录按钮
      closeRegisterPromoCode: this.$mSettingConfig.closeRegisterPromoCode, // 是否允许点击登录按钮
      registerParams: {
        phone: "",
        password: "",
        password_repetition: "",
        invite_code: null,
        nickname: "",
        code: "",
      },
      nav_back: this.$mAssetsPath.nav_backs,
      btnLoading: false,
      reqBody: {},
      codeSeconds: 0, // 验证码发送时间间隔
      smsCodeBtnDisabled: true,
    };
  },
  onLoad(options) {
    const time =
      moment().valueOf() / 1000 - uni.getStorageSync("registerSmsCodeTime");
    if (time < 60) {
      this.codeSeconds =
        this.$mConstDataConfig.sendCodeTime - parseInt(time, 10);
      this.handleSmsCodeTime(this.codeSeconds);
    } else {
      this.codeSeconds = this.$mConstDataConfig.sendCodeTime;
      this.smsCodeBtnDisabled = false;
      uni.removeStorageSync("registerSmsCodeTime");
    }
    if (options.invite_code) {
      this.registerParams.invite_code = options.invite_code;
    }
  },
  methods: {
    isAppAgreementDefaultSelect() {
      // 是否选择协议
      this.appAgreementDefaultSelect = !this.appAgreementDefaultSelect;
    },
    ...mapMutations(["login"]),
    navBack() {
      this.$mRouter.back();
    },
    // 通用跳转
    navTo(route) {
      this.$mRouter.push({ route });
    },
    // 获取手机验证码
    getSmsCode() {
      this.reqBody["phone"] = this.registerParams["phone"];
      let checkSendCode = this.$mGraceChecker.check(
        this.reqBody,
        this.$mFormRule.sendCodeRule
      );
      if (!checkSendCode) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      this.$http
        .post(smsCode, {
          phone: this.registerParams.phone,
          type: "1",
        })
        .then((r) => {
          if (r.data) {
            this.$mHelper.toast(`验证码发送成功, 验证码是${r.data}`);
          } else {
            this.$mHelper.toast("验证码已发送.");
          }
          this.smsCodeBtnDisabled = true;
          uni.setStorageSync("registerSmsCodeTime", moment().valueOf() / 1000);
          this.handleSmsCodeTime(59);
        });
    },
    handleSmsCodeTime(time) {
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.smsCodeBtnDisabled = false;
        } else {
          this.codeSeconds = time;
          this.smsCodeBtnDisabled = true;
          time--;
        }
      }, 1000);
    },
    // 注册账号
    async toRegister() {
      if (!this.appAgreementDefaultSelect) {
        this.$mHelper.toast("请勾选同意注册协议，即可注册哦");
        return;
      }
      this.reqBody["phone"] = this.registerParams["phone"];
      this.reqBody["invite_code"] = this.registerParams["invite_code"];
      this.reqBody["password_repetition"] = this.registerParams[
        "password_repetition"
      ];
      this.reqBody["password"] = this.registerParams["password"];
      this.reqBody["code"] = Number(this.registerParams["code"]);
      const cheRes = this.$mGraceChecker.check(
        this.reqBody,
        this.$mFormRule.registerRule
      );
      if (!cheRes) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      if (
        this.registerParams["password"] !==
        this.registerParams["password_repetition"]
      ) {
        this.$mHelper.toast("两次输入的密码不一致");
        return;
      }
      this.btnLoading = true;
      await this.$http
        .post(registerByPass, this.reqBody)
        .then(() => {
          this.btnLoading = false;
          this.$mHelper.toast("恭喜您注册成功");
          uni.setStorageSync("loginMobile", this.reqBody["phone"]);
          uni.setStorageSync("loginPassword", this.reqBody["password"]);
          window.location.href = "https://www.betaqr.com/apps";
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.register {
  padding-top: 60px;
  position: relative;
  width: 100vw;
  overflow: hidden;
  background: #fff;
  height: 100vh;
  .wrapper {
    position: relative;
    width: 100vw;
    z-index: 90;
    background: #fff;
    padding-bottom: 40upx;
    .welcome {
      position: relative;
      left: 50upx;
      top: -90upx;
      font-size: 46upx;
      color: #555;
      text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
    }
    .input-content {
      padding: 90upx 0 0 0;
    }
    .input-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin: 0 30upx;
      height: 120upx;
      margin-bottom: 45upx;
      padding-bottom: 20upx;
      border-bottom: 1upx solid #eeeeee;
      &:last-child {
        margin-bottom: 0;
      }

      .tit {
        height: 50upx;
        margin-bottom: 28upx;
        font-weight: bold;
        line-height: 56upx;
        font-size: 30upx;
        color: #333333;
      }

      input {
        width: calc(100% - 100upx);
        height: 60upx;
        font-size: $font-base + 2upx;
        color: $font-color-dark;
        width: 100%;
      }
    }

    .input-item-sms-code {
      position: relative;
      .sms-code-btn {
        position: absolute;
        color: #f91c1c;
        right: 40upx;
        font-weight: 500;
        bottom: 0;
        font-size: 28upx;
      }

      .sms-code-resend {
        color: #999;
      }

      .sms-code-btn:after {
        border: none;
        background-color: transparent;
      }
    }

    .forget-section {
      font-size: $font-sm + 2upx;
      color: $font-color-spec;
      text-align: center;
      margin-top: 40upx;
    }
  }

  .back-btn {
    position: absolute;
    left: 30upx;
    z-index: 9999;
    padding-top: var(--status-bar-height);
    top: 40upx;
    image {
      height: 42rpx;
      width: 43rpx;
    }
  }

  .left-top-sign {
    font-size: 48upx;
    font-weight: bold;
    color: #333333;
    margin-top: 56rpx;
    position: relative;
    left: 30upx;
  }
  .register-section {
    margin: 30upx 0 50upx;
    width: 100%;
    font-size: $font-sm + 2upx;
    color: $font-color-base;
    text-align: center;

    text {
      color: $font-color-spec;
      margin-left: 10upx;
    }
  }
  .confirm-btn {
    color: #ffffff;
    background: #f91c1c;
  }
}
</style>
